<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Sufee Admin - HTML5 Admin Template</title>
    <meta name="description" content="Sufee Admin - HTML5 Admin Template">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="apple-touch-icon" href="apple-icon.png">
    <link rel="shortcut icon" href="favicon.ico">


    <link rel="stylesheet" href="../plugins/vendors/bootstrap/dist/css/bootstrap.min.css">

    <link rel="stylesheet" href="../plugins/vendors/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../plugins/vendors/datatables.net-bs4/css/dataTables.bootstrap4.min.css">

    <link rel="stylesheet" href="../plugins/assets/css/style.css">

    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' rel='stylesheet' type='text/css'>
</head>

<body>
<div id="app" style="width: 100%">


    <!--1.左侧菜单栏-->
    <aside id="left-panel" class="left-panel">
        <nav class="navbar navbar-expand-sm navbar-default">

            <div class="navbar-header">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="./"> <img src="../images/logo.png"/></a>

                <a class="navbar-brand hidden" href="./"><img src="../images/logo.png"/></a>
            </div>

            <div id="main-menu" class="main-menu collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="index.html"> <i class="menu-icon fa fa-dashboard"></i>Dashboard </a>
                    </li>
                    <h3 class="menu-title">UI elements</h3><!-- /.menu-title -->
                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-laptop"></i>账号管理2</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="fa fa-puzzle-piece"></i><a style="cursor:pointer"  @click="clickUrl(1)">会员账号管理</a></li>
                            <li><i class="fa fa-id-badge"></i><a style="cursor:pointer"  @click="clickUrl(2)">管理员账号管理</a></li>
                        </ul>
                    </li>
                    <li class="menu-item-has-children active dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-table"></i>菜品系列</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="fa fa-table"></i><a style="cursor:pointer" @click="clickUrl(3)">分类</a></li>
                            <li><i class="fa fa-table"></i><a style="cursor:pointer" @click="clickUrl(4)">菜品</a></li>
                        </ul>
                    </li>
                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-th"></i>通知公告</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="menu-icon fa fa-th"></i><a style="cursor:pointer" @click="clickUrl(5)">运营推广（news1）</a></li>
                            <li><i class="menu-icon fa fa-th"></i><a style="cursor:pointer" @click="clickUrl(6)">热点洞察（news2）</a></li>
                        </ul>
                    </li>

                    <h3 class="menu-title">Icons</h3><!-- /.menu-title -->

                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-bar-chart"></i>餐桌管理</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="menu-icon fa fa-line-chart"></i><a style="cursor:pointer" @click="clickUrl(7)">餐桌信息</a></li>
                            <li><i class="menu-icon fa fa-area-chart"></i><a style="cursor:pointer" @click="clickUrl(8)">餐桌预定信息</a></li>
<!--                            <li><i class="menu-icon fa fa-pie-chart"></i><a href="charts-peity.html">Peity Chart</a></li>-->
                        </ul>
                    </li>

                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-area-chart"></i>订单管理</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="menu-icon fa fa-map-o"></i><a style="cursor:pointer" @click="clickUrl(9)">订单表</a></li>
                            <li><i class="menu-icon fa fa-street-view"></i><a style="cursor:pointer" @click="clickUrl(10)">订单明细表</a></li>
                        </ul>
                    </li>
                    <h3 class="menu-title">Extras</h3><!-- /.menu-title -->
                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-glass"></i>Pages</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="menu-icon fa fa-sign-in"></i><a href="page-login.html">Login</a></li>
                            <li><i class="menu-icon fa fa-sign-in"></i><a href="page-register.html">Register</a></li>
                            <li><i class="menu-icon fa fa-paper-plane"></i><a href="pages-forget.html">Forget Pass</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </aside>

    <!--2.上边框,内容-->
    <div id="right-panel" class="right-panel" style="width: 1500px">
        <!-- 上边框内容（头像；查询）-->
        <header id="header" class="header">

            <div class="header-menu">
                <div class="col-sm-7">
                    <a id="menuToggle" class="menutoggle pull-left"><i class="fa fa fa-tasks"></i></a>
                    <div class="header-left">
                        <button class="search-trigger"><i class="fa fa-search"></i></button>
                        <div class="form-inline">
                            <form class="search-form">
                                <input class="form-control mr-sm-2" type="text" placeholder="Search ..." aria-label="Search">
                                <button class="search-close" type="submit"><i class="fa fa-close"></i></button>
                            </form>
                        </div>
                    </div>
                </div>


                <div class="col-sm-5">
                    <div class="user-area dropdown float-right">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<!--                            <img class="user-avatar rounded-circle" src="images/admin.jpg" alt="User Avatar">-->

                                <img class="user-avatar rounded-circle"
                                     :preview-src-list=" `/photos/download?name=${adminInfo.data.image}` "
                                     :src="getImage(adminInfo.data.image)"
                                />
                                <div slot="error" class="image-slot">
                                    <img :src="imageUrl1"  style="width: auto; height: 40px; border:none;" >
                                </div>
                        </a>

                        <div class="user-menu dropdown-menu">
                            <a class="nav-link" href="#"><i class="fa fa-user"></i>个人信息</a>

                            <a class="nav-link" href="#"><i class="fa fa-user"></i> Notifications <span class="count">13</span></a>

                            <a class="nav-link" href="#"><i class="fa fa-cog"></i> Settings</a>

                            <a class="nav-link" href="#"><i class="fa fa-power-off"></i> 退出登录</a>
                        </div>
                    </div>

                </div>
            </div>

        </header><!-- /header -->

        <!--一个目录展示-->
        <div class="breadcrumbs">
            <div class="col-sm-4">
                <div class="page-header float-left">
                    <div class="page-title">
                        <h1>{{infoName}}</h1>
                    </div>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="page-header float-right">
                    <div class="page-title">
                        <ol class="breadcrumb text-right">
                            <li><a href="#">Dashboard</a></li>
                            <li><a href="#">Table</a></li>
                            <li class="active">Data table</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <!--内容-->
        <div class="content mt-3">
            <div class="animated fadeIn">
                <div class="row">

                    <div class="col-md-12">
                        <div class="card">
<!--                            <div class="card-header">-->
<!--                                <strong class="card-title">Data Table</strong>-->
<!--                            </div>-->
                            <div class="card-body" style="height: 700px">
                                <iframe
                                        :src="iframeUrl"
                                        frameborder="0"
                                        name="iframe0"
                                        width="100%"
                                        height="100%"
                                ></iframe>
                            </div>
                        </div>
                    </div>


                </div>
            </div><!-- .animated -->
        </div><!-- .content -->
    </div>
</div>

    <script src="../plugins/vendors/jquery/dist/jquery.min.js"></script>
    <script src="../plugins/vendors/popper.js/dist/umd/popper.min.js"></script>
    <script src="../plugins/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../plugins/assets/js/main.js"></script>


    <script src="../plugins/vendors/datatables.net/js/jquery.dataTables.min.js"></script>

    <script src="../plugins/vendors/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>

    <script src="../plugins/assets/js/init-scripts/data-table/datatables-init.js"></script>



    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../plugins/vue/vue.js"></script>

    <!-- 引入组件库 -->
    <script src="../plugins/element-ui/index.js"></script>

    <!-- 引入axios -->
    <script src="../plugins/axios/axios.min.js"></script>

    <script>
        new Vue({
            el: "#app",
            data: {
                adminInfo:{},   //用户信息
                infoName:'欢迎界面',   //标题
                iframeUrl:'admin/list/adminList.html',

            },
            created() {
                    const adminInfo = window.localStorage.getItem('adminInfo')
                console.log("adminInfo:::"+adminInfo)
                if (adminInfo) {
                    this.adminInfo = JSON.parse(adminInfo)
                }
                console.log("adminInfo:::"+adminInfo)
            },
            mounted() {
                window.clickUrl = this.clickUrl
            },
            methods: {
                handleClick(tab, event) {
                    console.log(tab, event);
                },

                loginOut(){
                    window.location.href='../login/login_admin.html';

                },

                UpdatePersonal(){
                    this.infoName='修改个人信息'
                    this.iframeUrl='list/adminUpdate.html'
                },
                clickUrl(index){
                    if (index=="1"){
                        this.infoName='管理员账号'
                        this.iframeUrl='admin/list/adminList.html'
                    }else if (index=="2"){
                        this.infoName='会员账号'
                        this.iframeUrl='admin/list/userList.html'
                    }else if (index=="3"){
                        this.infoName='分类'
                        this.iframeUrl='admin/list/typeList.html'
                    }else if (index=="4"){
                        this.infoName='菜品'
                        this.iframeUrl='admin/list/cuisineList.html'
                    }else if (index=="5"){
                        this.infoName='news1'
                        this.iframeUrl='admin/list/news1List.html'
                    }else if (index=="6"){
                        this.infoName='news2'
                        this.iframeUrl='admin/list/news2List.html'
                    }else if (index=="7"){
                        this.infoName='餐桌信息'
                        this.iframeUrl='admin/list/tableList.html'
                    }else if (index=="8"){
                        this.infoName='餐桌预定信息'
                        this.iframeUrl='admin/list/scheduleTableList.html'
                    }else if (index=="9"){
                        this.infoName='订单表'
                        this.iframeUrl='admin/list/ordersList.html'
                    }else if (index=="10"){
                        this.infoName='订单明细表'
                        this.iframeUrl='admin/list/orderDetailList.html'
                    }
                },

                getImage (image) {
                    this.imageUrl1= `/photos/download?name=${image}`
                },
            }
        })
    </script>
</body>

</html>
